<template>
	<myHeadTab>添加图片</myHeadTab>
	<view style="background: #F1F5FF;height: 100vh;padding-left: 32rpx;padding-top: 32rpx;">
		
		<uni-file-picker  :del-icon="false" v-model="fileList"  file-mediatype="image" @select="select" 	@progress="progress" @success="success" @fail="fail"  ref="files" :auto-upload="false"  style="position: absolute;"><view></view></uni-file-picker>
		<view class="upload-card" @click="handleChoose">
			<image style="height: 88rpx;width: 88rpx;" src="../../../../static/upload.png"></image>
			<view style="width: 100%;height: 24rpx;"></view>
			<view class="upload-font">上传文件</view>
		</view>
		
		<view style="width: 100%;height: 24rpx;"></view>
		
		<view class="f1">仅支持一般图片格式。如JPG、PNG。文件大小10M以下。5张以下。</view>
		
		
		
		
		
		<view v-if="fileList.length > 0" style="height: auto;width: 696rpx;display: flex;flex-wrap: wrap;gap: 14rpx;">
			
			<template v-for="(item,index) in fileList" :key="index">
				<view style="height: 168rpx;width: 220rpx;">
					<image @click="handleDelete(item)" style="width: 24rpx;height: 24rpx;position: relative;z-index: 10;top: 22rpx;left: 203rpx;" src="../../../../static/关闭2.png"></image>
					<image  style="height: 168rpx;width: 220rpx;" :src="item.url"></image>
				</view>
			</template>
			
		</view>
		
		
		<view style="width: 100%;height: 100rpx;" v-if="fileList.length > 0" ></view>
		
		<view style="width: 100%;height: 64rpx;" v-if="fileList.length == 0" ></view>
		
		<button @click="handleChoose" class="btn" style="position: relative;left: -14rpx;"><view class="f2">添加</view></button>
		
	</view>
</template>

<script setup>
import myHeadTab from '../../../../component/myHeadTab/index.vue'
import {ref} from 'vue'
const fileList = ref([]);
const files = ref(null)

		function handleDelete(item){
			fileList.value = fileList.value.filter((i)=>{if(i.uuid != item.uuid){return item}})
		}

			// 获取上传状态
		function select(e){
				console.log('选择文件：',e)
				e.tempFiles.forEach((item)=>{
					fileList.value.push(item)
				})
				
			}
			// 获取上传进度
		function progress(e){
				console.log('上传进度：',e)
			}
			
			// 上传成功
		function success(e){
				console.log('上传成功')
			}
		
			// 上传失败
		function fail(e){
				console.log('上传失败：',e)
			}

		function handleChoose(){
			console.log(files.value)
			files.value.chooseFiles()
		}

</script>

<style>
/deep/ .uni-file-picker__item{
	z-index: -1 !important;
	position: absolute !important;
}

/deep/ .uni-file-picker__files{
	z-index: -1 !important;
	position: absolute !important;
}

/deep/ .file-picker__box{
	width: 700rpx !important;
	height: 305rpx !important;
	border: none !important;
	position: absolute !important;
}

/deep/ .file-picker__box-content{
	border: none !important;
	position: absolute !important;
	
}

/deep/ .is-add{
	z-index: 10 !important;
}
	
/deep/ .uni-progress-bar{
		border-radius: 12rpx !important;
	}
	
/deep/ .uni-progress-inner-bar {  
		   
		    border-radius: 12rpx !important;
		}

.upload-card{
	width: 686rpx;
	height: 216rpx;
	padding-top: 64rpx;
	background: #FFFFFF;
	border: 2rpx dotted #B2B7C3;
	border-radius: 16rpx;
	text-align: center;

}
.upload-font{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f1{
	width: 410rpx;
	height: 68rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #939393;
letter-spacing: 0;
}
.file-card{
	width: 654rpx;
	height: 86rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding-left: 32rpx;
	padding-top: 34rpx;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	background: #276EFF;
	border-radius: 16rpx;
}
.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 80rpx;
}
.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
}
.pg{
width: 576.82rpx;
height: 12rpx;
background: #DBE1ED;
border-radius: 6rpx !important;
}
</style>
